FloatingActionButton と ThemeData のアクセントプロパティ

コンテンツ

まとめ

Flutter を削除しましたFloatingActionButton(FAB) 依存関係ThemeDataアクセントのプロパティ。

コンテクスト

以前は、ThemeData accentIconTheme財産はただだったによって使われたFloatingActionButtonデフォルトを決定するボタン内に表示されるテキストまたはアイコンの色。

FloatingActionButtonも使用しましたThemeData accentTextTheme財産、ただし、この依存関係は文書化されておらず、不必要でした。

これらの依存関係はどちらも混乱を招くものでした。たとえば、ThemeのaccentIconThemeすべてのフローティングアクションボタンの外観を変更するには、他のどのコンポーネントが影響を受けるかを知ることは困難でした。または将来的に影響を受ける可能性があります。

のマテリアルデザイン仕様「アクセント」カラーは含まれなくなりました。のColorSchemeの二次色が代わりに使用されるようになりました。

以前は、アプリケーションはテキストとアイコンの色を設定できました内部FloatingActionButtonsウィジェットを使ってforegroundColorプロパティ、またはFloatingActionButtonThemeのforegroundColor。どちらでもない場合foregroundColorプロパティが指定された、前景デフォルトの色accentIconThemeの色。

この変更により、デフォルトの動作ではカラースキームが使用されます。onSecondary代わりに色を付けます。

変更内容の説明

以前は、accentIconThemeのデフォルトを提供しましたFloatingActionButtonのforegroundColor財産：

    final Color foregroundColor = this.foregroundColor
      ?? floatingActionButtonTheme.foregroundColor
      ?? theme.accentIconTheme.color // To be removed.
      ?? theme.colorScheme.onSecondary;

テーマを設定するアプリaccentIconThemeを効果的に設定するにはforegroundColor全部のフローティングアクションボタンは、同じ効果を得ることができますを構成するforegroundColor彼らのテーマのfloatingActionButtonTheme。

のFloatingActionButtonのforegroundColor現在使用されていますを設定するにはtextStyleのRawMaterialButtonによって作成されたFloatingActionButton。以前、このテキストスタイルは、次のボタンスタイルに基づいています。ThemeData.accentTextTheme:

// theme.accentTextTheme becomes theme.textTheme
final TextStyle textStyle = theme.accentTextTheme.button.copyWith(
  color: foregroundColor,
  letterSpacing: 1.2,
);

アプリが明示的に設定している場合を除きます。accentTextThemeこの文書化されていない依存関係を利用するには、この使用法accentTextThemeは不要です。この変更により、この使用法が置き換えられます。accentTextThemeとtextTheme。

移行ガイド

この変更は次の 2 つのステップで発生しました。

の前景の場合、FloatingActionButton設定されていますデフォルト以外の色に変更すると、警告が出力されるようになりました。
のaccentIconTheme依存関係が削除されました。まだ移行していない場合は、アプリを移行します以下のパターンの通り。

設定するには、FloatingActionButtonのforegroundColorすべての FAB について、テーマの設定を行うことができます。floatingActionButtonThemeその代わりにaccentIconTheme。

移行前のコード:

MaterialApp(
  theme: ThemeData(
    accentIconTheme: IconThemeData(color: Colors.red),
  ),
)

移行後のコード:

MaterialApp(
  theme: ThemeData(
    floatingActionButtonTheme: FloatingActionButtonThemeData(
      foregroundColor: Colors.red,
    ),
  ),
)

タイムライン

リリースされたバージョン: 1.16.3
安定版リリース: 1.17

参考文献

設計ドキュメント:

FAB アクセントテーマの依存関係を削除する

API ドキュメント:

FloatingActionButton
ThemeData
FloatingActionButtonThemeData